<template>
    <view>
        <view class="custom_header" style="height: {{navH}}px">
            <view class="search">

                <view>

                    <view id="icon">

                        <u-icon name="arrow-left" color="#2979ff" size="18" @click="icon"></u-icon>
                    </view>
                    <h2 class="h2">深圳木卫二科技有限公司</h2>
                </view>

                <view>
                    <u-popup :show="show" @open="open">
                        <ul class="tan">
                            <li class="tan_li" @click="lianxiren">
                                联系人
                            </li>
                            <li class="tan_li" @click="shang">
                                商机
                            </li>
                            <li class="tan_li" @click="dingdan">
                                订单
                            </li>
                            <li class="tan_li" @click="danzi">
                                工单
                            </li>
                            <li class="tan_li" @click="feiyong">
                                费用
                            </li>
                            <li @click="close">
                                取消
                            </li>

                        </ul>
                    </u-popup>

                    <view style="color: #2979ff; font-size:30px; z-index: 66;" @click="show = true">
                        +</view>
                </view>
            </view>
        </view>
        <view class="qiaogongsi">
            <ul class="qiao_ke">
                <li class="ke_li">

                    <view>
                        <p style="color: #ccc;">客户状态</p>
                        <p>正在跟进</p>
                    </view>
                    <view>
                        <p style="color: #ccc;">客户星级</p>
                        <p><span style="color: #666;">★★★</span><span>☆</span></p>
                    </view>
                    <view>
                        <p style="color: #ccc;">客户归属</p>
                        <p>赵小刚</p>
                    </view>


                </li>
                <li class="ke_li">

                    <view>
                        <p style="color: #ccc;">客户类型</p>
                        <p>企业客户</p>
                    </view>
                    <view>
                        <p style="color: #ccc;">首联系人</p>
                        <p>李小红</p>
                    </view>
                    <view>
                        <p style="color: #ccc;">下次跟进</p>
                        <p>2019</p>
                    </view>


                </li>
            </ul>
        </view>
    </view>
    <view class="tab">
        <view :class="{ active: currentTab === 0 }" @click="switchTab(0)" data-tab="0">客户动态</view>
        <view :class="{ active: currentTab === 1 }" @click="switchTab(1)" data-tab="1">资料详情</view>
        <view :class="{ active: currentTab === 2 }" @click="switchTab(2)" data-tab="2">任务记录</view>
        <view :class="{ active: currentTab === 3 }" @click="switchTab(3)" data-tab="3">更多信息</view>
    </view>
    <view v-if="currentTab === 0" class="tab_one">
        <ul>
            <img src="/static/img/21.png" alt="" style="width: 10px;height: 10px; margin-left: 30px; margin-top: 8px;"><span
                style="color: #ccc; font-size: 13px;">08-23</span>
            <li class="display">
                <view><img src="/static/img/11.png" alt="" style="width: 40px;height: 40px;"></view>
                <view>
                    <p>赵小刚 <span style="color: #666; font-size: 13px;">销售经理</span> </p>
                    <p style=" font-size: 13px;">客户对产品意向很高，但是希望价格能有优惠.</p>
                    <p style="color: #666; font-size: 13px;"><img src="/static/shizhong.png" alt=""
                            style="width: 10px;height: 10px;">2019-08-23 22:31</p>
                </view>
                <view>
                    <p style="color: #666; font-size: 13px; padding: 10px 10px;">跟进(到访)</p>
                    <p> <img src="/static/xiaoxi.png" alt=""
                            style="width: 10px;height: 10px; margin-left: 30px; margin-top: 8px;"><span
                            style="color: #ccc; font-size: 13px;">4 &gt; </span></p>
                </view>
            </li>
            <img src="/static/img/21.png" alt="" style="width: 10px;height: 10px; margin-left: 30px; margin-top: 8px;"><span
                style="color: #ccc; font-size: 13px;">08-23</span>
            <li class="display">
                <view><img src="/static/img/11.png" alt="" style="width: 40px;height: 40px;"></view>
                <view>
                    <p>赵小刚 <span style="color: #666; font-size: 13px;">销售经理</span> </p>
                    <p style=" font-size: 13px;">新增订单 深圳木卫二科技有限公司产品订单</p>
                    <p style="color: #666; font-size: 13px;"><img src="/static/shizhong.png" alt=""
                            style="width: 10px;height: 10px;">2019-08-23 22:31</p>
                </view>
                <view>
                    <p style="color: #666; font-size: 13px; padding: 10px 10px;">商机</p>
                    <p> <img src="/static/xiaoxi.png" alt=""
                            style="width: 10px;height: 10px; margin-left: 30px; margin-top: 8px;"><span
                            style="color: #ccc; font-size: 13px;"> &gt; </span></p>
                </view>
            </li>
            <img src="/static/img/21.png" alt="" style="width: 10px;height: 10px; margin-left: 30px; margin-top: 8px;"><span
                style="color: #ccc; font-size: 13px;">08-23</span>
            <li class="display">
                <view><img src="/static/img/11.png" alt="" style="width: 40px;height: 40px;"></view>
                <view>
                    <p>赵小刚 <span style="color: #666; font-size: 13px;">销售经理</span> </p>
                    <p style=" font-size: 13px;">客户对产品意向很高，但是希望价格能有优惠.</p>
                    <p style="color: #666; font-size: 13px;"><img src="/static/shizhong.png" alt=""
                            style="width: 10px;height: 10px;">2019-08-23 22:31</p>
                </view>
                <view>
                    <p style="color: #666; font-size: 13px; padding: 10px 10px;">联系人</p>
                    <p> <img src="/static/xiaoxi.png" alt=""
                            style="width: 10px;height: 10px; margin-left: 30px; margin-top: 8px;"><span
                            style="color: #ccc; font-size: 13px;">4</span></p>
                </view>
            </li>
            <img src="/static/img/21.png" alt="" style="width: 10px;height: 10px; margin-left: 30px; margin-top: 8px;"><span
                style="color: #ccc; font-size: 13px;">08-23</span>
            <li class="display">
                <view><img src="/static/img/11.png" alt="" style="width: 40px;height: 40px;"></view>
                <view>
                    <p>赵小刚 <span style="color: #666; font-size: 13px;">销售经理</span> </p>
                    <p style=" font-size: 13px;">客户对产品意向很高，但是希望价格能有优惠.</p>
                    <p style="color: #666; font-size: 13px;"><img src="/static/shizhong.png" alt=""
                            style="width: 10px;height: 10px;">2019-08-23 22:31</p>
                </view>
                <view>
                    <p style="color: #666; font-size: 13px; padding: 10px 10px;">工单</p>
                    <p> <img src="/static/xiaoxi.png" alt=""
                            style="width: 10px;height: 10px; margin-left: 30px; margin-top: 8px;"><span
                            style="color: #ccc; font-size: 13px;">4</span></p>
                </view>
            </li>
            <img src="/static/img/21.png" alt="" style="width: 10px;height: 10px; margin-left: 30px; margin-top: 8px;"><span
                style="color: #ccc; font-size: 13px;">08-23</span>
            <li class="display">
                <view><img src="/static/img/11.png" alt="" style="width: 40px;height: 40px;"></view>
                <view>
                    <p>赵小刚 <span style="color: #666; font-size: 13px;">销售经理</span> </p>
                    <p style=" font-size: 13px;">客户对产品意向很高，但是希望价格能有优惠.</p>
                    <p style="color: #666; font-size: 13px;"><img src="/static/shizhong.png" alt=""
                            style="width: 10px;height: 10px;">2019-08-23 22:31</p>
                </view>
                <view>
                    <p style="color: #666; font-size: 13px; padding: 10px 10px;">跟进(到访)</p>
                    <p> <img src="/static/xiaoxi.png" alt=""
                            style="width: 10px;height: 10px; margin-left: 30px; margin-top: 8px;"><span
                            style="color: #ccc; font-size: 13px;">4</span></p>
                </view>
            </li>
        </ul>
    </view>
    <view v-if="currentTab === 1" class="tab_two">
        <p
            style="background-color:rgb(249, 249, 249);  height: 40px; width: 360px; border: 1px solid #ccc; margin-left: 8px; line-height: 40px; margin-top: 10px;">

            <img src="/static/img/22.png" alt="" style="width: 20px;height: 20px; vertical-align: middle;">基本信息
        </p>
        <p style="height: 40px; width: 360px; border: 1px solid #ccc; margin-left: 8px; line-height: 40px; ">

            <span style="color: #666; margin-left: 8px;">客户名称</span>
            <span style="float: right; margin-right: 8px;">深圳木卫二科技有限公司</span>
        </p>
        <p style="height: 40px; width: 360px; border: 1px solid #ccc; margin-left: 8px; line-height: 40px; ">

            <span style="color: #666; margin-left: 8px;">助记名称</span>
            <span style="float: right; margin-right: 8px;">-</span>
        </p>
        <p style="height: 40px; width: 360px; border: 1px solid #ccc; margin-left: 8px; line-height: 40px; ">

            <span style="color: #666; margin-left: 8px;">客户类型</span>
            <span style="float: right; margin-right: 8px;">企业客户</span>
        </p>
        <p style="height: 40px; width: 360px; border: 1px solid #ccc; margin-left: 8px; line-height: 40px; ">

            <span style="color: #666; margin-left: 8px;">客户星级</span>
            <span style="float: right; margin-right: 8px;">★★★★☆ </span>
        </p>
        <p style="height: 40px; width: 360px; border: 1px solid #ccc; margin-left: 8px; line-height: 40px; ">

            <span style="color: #666; margin-left: 8px;">客户状态</span>
            <span style="float: right; margin-right: 8px;">正在跟进</span>
        </p>
        <p style="height: 40px; width: 360px; border: 1px solid #ccc; margin-left: 8px; line-height: 40px; ">

            <span style="color: #666; margin-left: 8px;">所属行业</span>
            <span style="float: right; margin-right: 8px;">电子商务</span>
        </p>
        <p style="height: 40px; width: 360px; border: 1px solid #ccc; margin-left: 8px; line-height: 40px; ">

            <span style="color: #666; margin-left: 8px;">客户来源</span>
            <span style="float: right; margin-right: 8px;">电话营销</span>
        </p>
        <p style="height: 40px; width: 360px; border: 1px solid #ccc; margin-left: 8px; line-height: 40px; ">

            <span style="color: #666; margin-left: 8px;">客户归属</span>
            <span style="float: right; margin-right: 8px;">赵小刚(已锁定，到期时间10/30)</span>
        </p>

        <p
            style="background-color:rgb(249, 249, 249);  height: 40px; width: 360px; border: 1px solid #ccc; margin-left: 8px; line-height: 40px; margin-top: 10px;">

            <img src="/static/img/22.png" alt="" style="width: 20px;height: 20px; vertical-align: middle;">附加信息
        </p>
        <p style="height: 40px; width: 360px; border: 1px solid #ccc; margin-left: 8px; line-height: 40px; ">

            <span style="color: #666; margin-left: 8px;">所在地区</span>
            <span style="float: right; margin-right: 8px;">广东省深圳市</span>
        </p>
        <p style="height: 40px; width: 360px; border: 1px solid #ccc; margin-left: 8px; line-height: 40px; ">

            <span style="color: #666; margin-left: 8px;">详细地址</span>
            <span style="float: right; margin-right: 8px;">10-20人</span>
        </p>
        <p style="height: 40px; width: 360px; border: 1px solid #ccc; margin-left: 8px; line-height: 40px; ">

            <span style="color: #666; margin-left: 8px;">企业规模</span>
            <span style="float: right; margin-right: 8px;">10-20人</span>
        </p>
        <p style="height: 40px; width: 360px; border: 1px solid #ccc; margin-left: 8px; line-height: 40px; ">

            <span style="color: #666; margin-left: 8px;">下级客户</span>
            <span style="float: right; margin-right: 8px;">10</span>
        </p>
        <p style="height: 40px; width: 360px; border: 1px solid #ccc; margin-left: 8px; line-height: 40px; ">

            <span style="color: #666; margin-left: 8px;">备注信息</span>
            <span style="float: right; margin-right: 8px;">-</span>
        </p>

        <p
            style="background-color:rgb(249, 249, 249);  height: 40px; width: 360px; border: 1px solid #ccc; margin-left: 8px; line-height: 40px; margin-top: 10px;">

            <img src="/static/img/22.png" alt="" style="width: 20px;height: 20px; vertical-align: middle;">系统信息
        </p>
        <p style="height: 40px; width: 360px; border: 1px solid #ccc; margin-left: 8px; line-height: 40px; ">

            <span style="color: #666; margin-left: 8px;">系统编号</span>
            <span style="float: right; margin-right: 8px;">KH20190324010001</span>
        </p>
        <p style="height: 40px; width: 360px; border: 1px solid #ccc; margin-left: 8px; line-height: 40px; ">

            <span style="color: #666; margin-left: 8px;">创建人员</span>
            <span style="float: right; margin-right: 8px;">赵小刚</span>
        </p>
        <p style="height: 40px; width: 360px; border: 1px solid #ccc; margin-left: 8px; line-height: 40px; ">

            <span style="color: #666; margin-left: 8px;">所属部门</span>
            <span style="float: right; margin-right: 8px;">销售一部</span>
        </p>
        <p style="height: 40px; width: 360px; border: 1px solid #ccc; margin-left: 8px; line-height: 40px; ">

            <span style="color: #666; margin-left: 8px;">协作人员</span>
            <span style="float: right; margin-right: 8px;">李小明、陈小红、曾小芳</span>
        </p>
        <p style="height: 40px; width: 360px; border: 1px solid #ccc; margin-left: 8px; line-height: 40px; ">

            <span style="color: #666; margin-left: 8px;">前归属人</span>
            <span style="float: right; margin-right: 8px;">赵小刚</span>
        </p>
        <p style="height: 40px; width: 360px; border: 1px solid #ccc; margin-left: 8px; line-height: 40px; ">

            <span style="color: #666; margin-left: 8px;">前所属部门</span>
            <span style="float: right; margin-right: 8px;">销售一部</span>
        </p>
        <p style="height: 40px; width: 360px; border: 1px solid #ccc; margin-left: 8px; line-height: 40px; ">

            <span style="color: #666; margin-left: 8px;">创建时间</span>
            <span style="float: right; margin-right: 8px;">2019-03-15 17:27</span>
        </p>
        <p style="height: 40px; width: 360px; border: 1px solid #ccc; margin-left: 8px; line-height: 40px; ">

            <span style="color: #666; margin-left: 8px;">更新时间</span>
            <span style="float: right; margin-right: 8px;">2019-03-15 17:27</span>
        </p>
        <p style="height: 40px; width: 360px; border: 1px solid #ccc; margin-left: 8px; line-height: 40px; ">

            <span style="color: #666; margin-left: 8px;">最后跟进</span>
            <span style="float: right; margin-right: 8px;">2019-03-15 17:27</span>
        </p>
        <p style="height: 40px; width: 360px; border: 1px solid #ccc; margin-left: 8px; line-height: 40px; ">

            <span style="color: #666; margin-left: 8px;">下次跟进</span>
            <span style="float: right; margin-right: 8px;">2019-03-15 17:27</span>
        </p>
        <p
            style="background-color:rgb(249, 249, 249);  height: 40px; width: 360px; border: 1px solid #ccc; margin-left: 8px; line-height: 40px; margin-top: 10px;">


        </p>
    </view>
    <view v-if="currentTab === 2" class="two_san">
        <ul>
            <li class="san_li">
                <view>
                    <p style="color: #666;">与客户沟通报价事宜</p>
                    <p style="color:#666;">最后跟进: 2019-03-23 22:31</p>
                    <p style="color: #666;">紧要程度: 紧急</p>
                </view>
                <view style="text-align: center;">
                    <p> <img src="/static/img/21.png" alt="" style="width: 10px; height: 10px;"> 未开始</p>
                    <p><img src="/static/img/11.png" alt="" style="width: 40px;height: 40px;"></p>
                    <p>赵小刚</p>
                </view>
            </li>

            <li class="san_li">
                <view>
                    <p style="color: #666;">与客户沟通报价事宜</p>
                    <p style="color:#666;">最后跟进: 2019-03-23 22:31</p>
                    <p style="color: #666;">紧要程度: 紧急</p>
                </view>
                <view style="text-align: center;">
                    <p> <img src="/static/img/21.png" alt="" style="width: 10px; height: 10px;"> 未开始</p>
                    <p><img src="/static/img/11.png" alt="" style="width: 40px;height: 40px;"></p>
                    <p>赵小刚</p>
                </view>
            </li>
            <li class="san_li">
                <view>
                    <p style="color: #666;">与客户沟通报价事宜</p>
                    <p style="color:#666;">最后跟进: 2019-03-23 22:31</p>
                    <p style="color: #666;">紧要程度: 紧急</p>
                </view>
                <view style="text-align: center;">
                    <p> <img src="/static/img/21.png" alt="" style="width: 10px; height: 10px;"> 未开始</p>
                    <p><img src="/static/img/11.png" alt="" style="width: 40px;height: 40px;"></p>
                    <p>赵小刚</p>
                </view>
            </li>
            <li class="san_li">
                <view>
                    <p style="color: #666;">与客户沟通报价事宜</p>
                    <p style="color:#666;">最后跟进: 2019-03-23 22:31</p>
                    <p style="color: #666;">紧要程度: 紧急</p>
                </view>
                <view style="text-align: center;">
                    <p> <img src="/static/img/21.png" alt="" style="width: 10px; height: 10px;"> 未开始</p>
                    <p><img src="/static/img/11.png" alt="" style="width: 40px;height: 40px;"></p>
                    <p>赵小刚</p>
                </view>
            </li>
            <li class="san_li">
                <view>
                    <p style="color: #666;">与客户沟通报价事宜</p>
                    <p style="color:#666;">最后跟进: 2019-03-23 22:31</p>
                    <p style="color: #666;">紧要程度: 紧急</p>
                </view>
                <view style="text-align: center;">
                    <p> <img src="/static/img/21.png" alt="" style="width: 10px; height: 10px;"> 未开始</p>
                    <p><img src="/static/img/11.png" alt="" style="width: 40px;height: 40px;"></p>
                    <p>赵小刚</p>
                </view>
            </li>

        </ul>
    </view>
    <view v-if="currentTab === 3" class="two_si">
        <li style="margin-top: 11px;">

            <p
                style="display: flex; justify-content: space-between; padding: 10px 10px; border: 1px solid #ccc; height: 30px;">
                <span>联系人</span>
                <span style="color: #2979ff;"> 100<span style="color: #ccc;"> &gt; </span> </span>
            </p>
        </li>
        <li style="margin-top: 11px;">

            <p
                style="display: flex; justify-content: space-between; padding: 10px 10px; border: 1px solid #ccc; height: 30px;">
                <span>下级客户</span>
                <span style="color: #2979ff;"> 100<span style="color: #ccc;"> &gt; </span> </span>
            </p>
        </li>
        <li style="margin-top: 11px;">

            <p
                style="display: flex; justify-content: space-between; padding: 10px 10px; border: 1px solid #ccc; height: 30px;">
                <span>跟进记录</span>
                <span style="color: #2979ff;"> 100<span style="color: #ccc;"> &gt; </span> </span>
            </p>
        </li>
        <li style="margin-top: 11px;">

            <p
                style="display: flex; justify-content: space-between; padding: 10px 10px; border: 1px solid #ccc; height: 30px;">
                <span>通话记录</span>
                <span style="color: #2979ff;"> 100<span style="color: #ccc;"> &gt; </span> </span>
            </p>
        </li>
        <li style="margin-top: 11px;">

            <p
                style="display: flex; justify-content: space-between; padding: 10px 10px; border: 1px solid #ccc; height: 30px;">
                <span>短信记录</span>
                <span style="color: #2979ff;"> 100<span style="color: #ccc;"> &gt; </span> </span>
            </p>
        </li>
        <li style="margin-top: 11px;">

            <p
                style="display: flex; justify-content: space-between; padding: 10px 10px; border: 1px solid #ccc; height: 30px;">
                <span>工单记录</span>
                <span style="color: #2979ff;"> 100<span style="color: #ccc;"> &gt; </span> </span>
            </p>
        </li>
        <li style="margin-top: 11px;">

            <p
                style="display: flex; justify-content: space-between; padding: 10px 10px; border: 1px solid #ccc; height: 30px;">
                <span>商机记录</span>
                <span style="color: #2979ff;"> 100<span style="color: #ccc;"> &gt; </span> </span>
            </p>
        </li>
        <li style="margin-top: 11px;">

            <p
                style="display: flex; justify-content: space-between; padding: 10px 10px; border: 1px solid #ccc; height: 30px;">
                <span>定单记录</span>
                <span style="color: #2979ff;"> 100<span style="color: #ccc;"> &gt; </span> </span>
            </p>
        </li>
        <li style="margin-top: 11px;">

            <p
                style="display: flex; justify-content: space-between; padding: 10px 10px; border: 1px solid #ccc; height: 30px;">
                <span>发票记录</span>
                <span style="color: #2979ff;"> 100<span style="color: #ccc;"> &gt; </span> </span>
            </p>
        </li>
        <li style="margin-top: 11px;">

            <p
                style="display: flex; justify-content: space-between; padding: 10px 10px; border: 1px solid #ccc; height: 30px;">
                <span>退款记录</span>
                <span style="color: #2979ff;"> 100<span style="color: #ccc;"> &gt; </span> </span>
            </p>
        </li>
        <li style="margin-top: 11px;">

            <p
                style="display: flex; justify-content: space-between; padding: 10px 10px; border: 1px solid #ccc; height: 30px;">
                <span>费用记录</span>
                <span style="color: #2979ff;"> 100<span style="color: #ccc;"> &gt; </span> </span>
            </p>
        </li>
        <li style="margin-top: 11px;">

            <p
                style="display: flex; justify-content: space-between; padding: 10px 10px; border: 1px solid #ccc; height: 30px;">
                <span>相关附件</span>
                <span style="color: #2979ff;"> 100<span style="color: #ccc;"> &gt; </span> </span>
            </p>
        </li>
        <li style="margin-top: 11px;">

            <p
                style="display: flex; justify-content: space-between; padding: 10px 10px; border: 1px solid #ccc; height: 30px;">
                <span>归属记录</span>
                <span style="color: #2979ff;"> 100<span style="color: #ccc;"> &gt; </span> </span>
            </p>
        </li>
        <li style="margin-top: 11px;">

            <p
                style="display: flex; justify-content: space-between; padding: 10px 10px; border: 1px solid #ccc; height: 30px;">
                <span>操作日志</span>
                <span style="color: #2979ff;">100 <span style="color: #ccc;"> &gt; </span> </span>
            </p>
        </li>

    </view>
</template>

<script setup lang="ts">
import { ref } from "vue";
const icon = () => {
    uni.navigateBack({
        delta: 1
    })
}

const lianxiren = () => {
    uni.navigateTo({
        url: '/pages/qiao-crm/qiao-sousuo/qiaolianxiren'
    })
}

const shang = () => {
    uni.navigateTo({
        url: '/pages/qiao-crm/qiao-sousuo/qiaolianxiren'
    })
}
const dingdan = () => {
    uni.navigateTo({
        url: '/pages/qiao-crm/qiao-sousuo/qiaodingdan'
    })
}
const danzi = () => {
    uni.navigateTo({
        url: '/pages/qiao-crm/qiao-sousuo/qiaodanzi'
    })
}

const feiyong = () => {
    uni.navigateTo({
        url: '/pages/qiao-crm/qiao-sousuo/qiaofeiyong'
    })
}

const currentTab = ref(0)
const switchTab = (tab: number) => {
    currentTab.value = tab;
};

const show = ref(false)
const open = () => {
    show.value = true
}
const close = () => {
    show.value = false
}
</script>

<style lang="scss">
.san_li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 20px;
}
.two_si {
    width: 360px;
    margin-left: 8px;
    margin-top: 10px;
    height: 900px;
}

.tab_two {
    height: 1200px;

}

.tab_one {
    height: 700px;

}




.tab_one {
    width: 375px;
    overflow: hidden;

    .display {
        width: 360px;
        margin-left: 8px;
        display: flex;
        height: 100px;
        box-shadow: 0 0 10px #ccc;
        justify-content: space-between;
        margin-top: 10px;
        border-radius: 10px;
    }
}

.tab {
    display: flex;
    margin-top: 10px;
    border: 1px solid #ccc;
    height: 40px;
    width: 360px;
    margin-left: 8px;

    view {
        width: 100px;
        height: 40px;
        line-height: 40px;
        text-align: center;

    }
}

.tan {
    text-align: center;
    color: #2979ff;

    .tan_li {
        border-bottom: 1px solid #ccc;
    }
}



.active {
    color: lightblue;
}



.tab-button {
    width: 100px;
    height: 40px;
    border: none;

    margin-right: 10px;
    color: #666;
    font-size: 16px;
    line-height: 40px;
    text-align: center;
    cursor: pointer;
}

.tabs {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
}

.active {
    color: #09f;
}



.qiao_ke {

    padding: 20px 20px;

    width: 300px;
}

.ke_li {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    height: 100px;
    text-align: center;
}



.qiaogongsi {
    width: 360px;
    height: 200px;
    border: 1px solid #ccc;
    margin-top: 80px;
    margin-left: 8px;
}

.h2 {
    margin-left: 100px;
}

.custom_header {
    display: flex;
    justify-content: space-between;
    width: 100vw;
    line-height: 150rpx;
    font-weight: bold;
    position: fixed;
    left: 0;
    top: 10px;
    z-index: 99;


}

.search {
    display: flex;
    width: 375px;
    justify-content: space-between;
    padding-top: 10px;
    align-items: center;
    padding: 10px 10px;
    position: relative;

    .inp {
        width: 250px;
        height: 60rpx;
        border: 1rpx solid #ccc;
        border-radius: 30rpx;
        padding-left: 30px;
        margin-left: 30px;

    }
}

.search_img {
    width: 20px;
    height: 20px;
    position: absolute;
    left: 100rpx;
    top: 80rpx;
}

#icon {
    position: absolute;
    top: 40px;
    left: 10px;
    z-index: 66;
}
</style>